feat: #110: Explore page #133

VanishMax · 2024-11-14T06:38:09Z

Closes #110

The header is ready, trading pair block is only html/css ready. The data is requested and rendered server-side only – all skeletons are removed from the header.

# Conflicts: # src/widgets/header/ui/header.tsx # tailwind.config.ts

VanishMax · 2024-11-25T12:26:44Z

src/pages/explore/ui/stats.tsx

+      <InfoCard title='Total Trading Volume (24h)'>
+        <Text large color='text.primary'>
+          <Text large color='text.primary'>
+            {shortify(Number(getFormattedAmtFromValueView(stats.directVolume)))}


@grod220 the volume comes a 10^21 number, and even the ValueViewComponent displays it as 1589T. Something seems to be wrong in these calculations. Do you know what?

@cronokirby need assistance here. directVolume is returning 1444608489888181911552. Assuming this is uusdc, the display exponent is 6. So that gives us 1444608489888181.911552 or 1444T.

Would also highlight that the liquidity field returns something like liquidity: 118364618673.38, which is not an integer. It requires us to parseInt(), which may fail with big numbers

For mainnet data, I'm only seeing weird values for the month window in the aggregate summary, will investigate, but probably related to needing some more stringent filtering of assets with no real quote asset price on penumbra.

The liquidity field could be amended to not be a float, but every other value that is conceptually an Amount (like volume) is already a float, and so I think I would recommend just developing a bit of infrastructure here to deal with that. We need bespoke code here to deal with prices, which have to be a float, as well.

VanishMax · 2024-11-25T12:27:34Z

src/pages/explore/api/get-stats.ts

+    // TODO: what asset should be used here?
+    const usdcMetadata = allAssets.find(asset => asset.symbol.toLowerCase() === 'usdc');
+    if (!usdcMetadata) {
+      return { error: 'USDC not found in registry' };
+    }


question: the database doesn't seem to have the base asset for the global summary. How ok is it to have this check in code?

You mean quote asset right? @cronokirby think it may be nice for the dex_ex_aggregate_summary table to return the quote asset id.

Yeah we can add metadata for this

grod220 · 2024-11-25T13:57:48Z

next.config.mjs

+          options: {
+            svgo: false,
+            svgoConfig: {
+              plugins: [
+                {
+                  name: 'preset-default',
+                  params: {
+                    overrides: {
+                      removeViewBox: false,
+                    },


question: what does this do?

Allows the import of .svg files as react components. I used it to import PenumbraWaves component.

The removeViewBox: false is needed to keep the dimensions of the svg and scale it without cutting it

grod220 · 2024-11-25T13:58:52Z

src/pages/explore/api/get-stats.ts

+
+export const getStats = async (): Promise<StatsResponse> => {
+  try {
+    const durationWindow: DurationWindow = '1d';


suggestion: I'd pull this above and define it as something like const STATS_DURATION_WINDOW = ...

or maybe this should be a query param because I can imagine other duration windows being supported on the stats page in the future

Moved as a constant out of the function for now. Supporting query params would also require changing some texts on the page, – not sure we need it for now

grod220 · 2024-11-25T14:03:13Z

src/pages/explore/api/get-stats.ts

+    // TODO: what asset should be used here?
+    const usdcMetadata = allAssets.find(asset => asset.symbol.toLowerCase() === 'usdc');
+    if (!usdcMetadata) {
+      return { error: 'USDC not found in registry' };
+    }


You mean quote asset right? @cronokirby think it may be nice for the dex_ex_aggregate_summary table to return the quote asset id.

grod220 · 2024-11-25T14:06:23Z

src/pages/explore/api/get-stats.ts

+    return {
+      activePairs: stats.active_pairs,
+      trades: stats.trades,
+      largestPair,
+      topPriceMover,
+      largestPairLiquidity:
+        largestPairEnd &&
+        toValueView({
+          amount: stats.largest_dv_trading_pair_volume,
+          metadata: largestPairEnd,
+        }),
+      liquidity: toValueView({
+        amount: parseInt(`${stats.liquidity}`),
+        metadata: usdcMetadata,
+      }),
+      directVolume: toValueView({ amount: stats.direct_volume, metadata: usdcMetadata }),


issue: We may just be lucky that this is working as you aren't serializing before sending this over the wire. As a ValueView is a class, if you don't serialize/deserialize, the other end may try call a function on the class that doesn't exist. See src/shared/api/server/types.ts for a reference on return types.

but it doesn't send this over the wire since everything is rendered in react server components with use server (or without use client, to be precise). The data is fetched and immediately transformed to HTML. This valid HTML is then sent over the wire to the client.

grod220 · 2024-11-25T14:29:53Z

src/pages/explore/ui/stats.tsx

+      <InfoCard title='Total Trading Volume (24h)'>
+        <Text large color='text.primary'>
+          <Text large color='text.primary'>
+            {shortify(Number(getFormattedAmtFromValueView(stats.directVolume)))}


@cronokirby need assistance here. directVolume is returning 1444608489888181911552. Assuming this is uusdc, the display exponent is 6. So that gives us 1444608489888181.911552 or 1444T.

grod220 · 2024-11-25T14:31:41Z

src/pages/explore/ui/stats.tsx

+import { getFormattedAmtFromValueView } from '@penumbra-zone/types/value-view';
+import { getStats } from '../api/get-stats';
+
+export const ExploreStats = async () => {


idea: I kinda think a 2x3 md view is warranted, but I don't see it in figma.

good call! Added this layout for tablet screens

grod220 · 2024-11-25T14:33:22Z

src/pages/explore/ui/stats.tsx

+      </InfoCard>
+      <InfoCard title='Total Liquidity Available'>
+        <Text large color='text.primary'>
+          {shortify(Number(getFormattedAmtFromValueView(stats.liquidity)))}


question: why not use ValueViewComponent for these?

I tried but it there is currently no way to hide the asset icon, and the font sizes differ from the designs

grod220

Think we can ship this and have follow ups as needed 👍

VanishMax added 4 commits November 13, 2024 13:48

feat: #110: add PenumbraWaves SVG to the header

6e40940

feat: #110: add markup for the explore page header

32e9985

feat: #111: add loading markup for the pairs table

6bfd41e

feat: fill table with fake data

acd68cd

VanishMax self-assigned this Nov 14, 2024

VanishMax marked this pull request as draft November 14, 2024 06:38

VanishMax mentioned this pull request Nov 14, 2024

pindexer: flesh out dex-explorer indexer penumbra-zone/penumbra#4917

Merged

2 tasks

VanishMax added 6 commits November 21, 2024 10:49

Merge branch 'main' into feat/#110-explore-page-header

9e32ff2

# Conflicts: # src/widgets/header/ui/header.tsx # tailwind.config.ts

feat: implement stats backend request

487041c

Merge branch 'main' into feat/#110-explore-page-header

22b930a

feat: apply stats data to the explore page

5fa44df

feat: #110: use server components to render the explore page

6e0f9ed

fix: lint

3b66dc8

VanishMax marked this pull request as ready for review November 25, 2024 12:25

VanishMax requested a review from a team November 25, 2024 12:25

VanishMax commented Nov 25, 2024

View reviewed changes

grod220 reviewed Nov 25, 2024

View reviewed changes

VanishMax added 2 commits November 25, 2024 19:11

fix: move the constant out

88a283b

fix: add tablet layout

f11a7bd

grod220 approved these changes Nov 27, 2024

View reviewed changes

VanishMax merged commit 516ff3d into main Nov 27, 2024
2 checks passed

VanishMax deleted the feat/#110-explore-page-header branch November 27, 2024 11:59

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: #110: Explore page #133

feat: #110: Explore page #133

VanishMax commented Nov 14, 2024 •

edited

Loading

VanishMax Nov 25, 2024

grod220 Nov 25, 2024

VanishMax Nov 25, 2024

cronokirby Nov 26, 2024

VanishMax Nov 25, 2024

grod220 Nov 25, 2024

cronokirby Nov 26, 2024

grod220 Nov 25, 2024

VanishMax Nov 25, 2024

grod220 Nov 25, 2024

grod220 Nov 25, 2024

VanishMax Nov 25, 2024

grod220 Nov 25, 2024

grod220 Nov 25, 2024

VanishMax Nov 25, 2024

grod220 Nov 25, 2024

grod220 Nov 25, 2024

VanishMax Nov 25, 2024

grod220 Nov 25, 2024

VanishMax Nov 25, 2024

grod220 left a comment

feat: #110: Explore page #133

feat: #110: Explore page #133

Conversation

VanishMax commented Nov 14, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

grod220 left a comment

Choose a reason for hiding this comment

VanishMax commented Nov 14, 2024 •

edited

Loading